import { NavBar, Swiper } from "antd-mobile";
import { useSelector } from "react-redux";
import { useNavigate, useSearchParams } from "react-router-dom";
import { Tabs } from "antd-mobile";
import style from './style.module.css'
// 用户头像组件
const UserIcon = () => {
  // 从redux中获取用户信息中的头像
  const avator =
    useSelector((state) => state.user.userInfo.avator) ||
    "/public/image/user-not-login.png";
  return <img src={avator} alt="" width="20" height="20" />;
};

// 选择城市组件
const SelectCity = () => {
  const navigate = useNavigate(); // 获取导航函数
  const [searchParams] = useSearchParams(); // 获取搜索参数
  const city = searchParams.get("city") || "北京"; // 获取城市参数，如果没有则默认为北京
  return <span onClick={() => navigate("/city")}>{city}</span>; // 点击城市时跳转到城市选择页面
};

// 首页组件
const Home = () => {
  return (
    <div>
      <NavBar
        backIcon={false} // 不显示返回按钮
        left={<UserIcon></UserIcon>} // 左侧显示用户头像
        right={<SelectCity></SelectCity>} // 右侧显示选择城市
      >
        首页
      </NavBar>

      <Tabs>
        <Tabs.Tab title="水果" key="fruits">
          <Swiper className={style['swiper']} loop autoplay>
            <Swiper.Item>
              <img src="/public/image/1.jpg" alt="" className={style['img']}/>
            </Swiper.Item>
            <Swiper.Item>
              <img src="/public/image/2.jpg" alt="" className={style['img']}/>
            </Swiper.Item>
            <Swiper.Item>
              <img src="/public/image/3.jpg" alt="" className={style['img']}/>
            </Swiper.Item>
            <Swiper.Item>
              <img src="/public/image/4.jpg" alt="" className={style['img']}/>
            </Swiper.Item>

          </Swiper>
        </Tabs.Tab>
        <Tabs.Tab title="蔬菜" key="vegetables">
          西红柿
        </Tabs.Tab>
        <Tabs.Tab title="动物" key="animals">
          蚂蚁
        </Tabs.Tab>
      </Tabs>
    </div>
  );
};

export default Home;
